<template>
	<view class="page-container">
		<view class="bg-image">
			<image src="https://202231117.oss-cn-beijing.aliyuncs.com/login.jpg" mode="aspectFill" class="bg-img" />
			<view class="bg-overlay"></view>
		</view>
		
		<view class="content">
			<view class="header">
				<image class="logo" src="https://202231117.oss-cn-beijing.aliyuncs.com/首页标志.png" mode="aspectFit" />
				<view class="title">沐雪缘馆</view>
				<view class="subtitle">遇见美好，邂逅缘分</view>
				<view class="welcome-text">欢迎回来，让我们继续寻找真爱</view>
			</view>

			<view class="form-section">
				<view class="section-title">账号登录</view>
				<view class="input-group">
					<view class="input-wrapper">
						<image class="input-icon" src="https://202231117.oss-cn-beijing.aliyuncs.com/%E6%89%8B%E6%9C%BA%E7%99%BB%E5%BD%95.png" mode="aspectFit" />
						<input 
							class="custom-input" 
							placeholder="请输入手机号" 
							type="number" 
							maxlength="11"
							v-model="phone"
							placeholder-class="input-placeholder"
							cursor-spacing="20"
						/>
					</view>
					<view class="input-wrapper">
						<image class="input-icon" src="https://202231117.oss-cn-beijing.aliyuncs.com/%E5%AF%86%E7%A0%81.png" mode="aspectFit" />
						<input 
							class="custom-input" 
							placeholder="请输入密码" 
							password
							v-model="password"
							placeholder-class="input-placeholder"
							cursor-spacing="20"
						/>
					</view>
				</view>

				<view class="action-buttons">
					<button 
						class="login-btn" 
						@tap="login"
						:disabled="!phone || !password"
						hover-class="button-hover"
					>登录</button>
					
					<button 
						class="wechat-btn" 
						open-type="getUserInfo" 
						@tap="handleWechatLogin"
						hover-class="button-hover"
					>
						<image class="wechat-icon" src="https://202231117.oss-cn-beijing.aliyuncs.com/微信登录.png" mode="aspectFit" />
						<text>微信一键登录</text>
					</button>
				</view>

				<view class="bottom-links">
					<view class="link-item" @click="register">
						<text>还没有账号？</text>
						<text class="highlight">立即注册</text>
					</view>
					<view class="link-item" @click="forgotPassword">
						<text>忘记密码？</text>
					</view>
				</view>
			</view>

			<view class="features-section">
				<view class="feature-item" @click="navigateTo('/pages/vip/vip')">
					<image class="feature-icon" src="https://202231117.oss-cn-beijing.aliyuncs.com/皇冠会员.png" mode="aspectFit" />
					<text>开通会员</text>
				</view>
				<view class="feature-item" @click="navigateTo('/pages/match/match')">
					<image class="feature-icon" src="https://202231117.oss-cn-beijing.aliyuncs.com/缘分定制.png" mode="aspectFit" />
					<text>智能匹配</text>
				</view>
				<view class="feature-item" @click="navigateTo('/pages/activity/activity')">
					<image class="feature-icon" src="https://202231117.oss-cn-beijing.aliyuncs.com/庆祝.png" mode="aspectFit" />
					<text>线下活动</text>
				</view>
			</view>

			<view class="footer">
				<view class="footer-text">已有10000+用户在这里找到真爱</view>
				<view class="footer-icons">
					<image v-for="(item, index) in userAvatars" :key="index" :src="item" mode="aspectFill" class="avatar" />
				</view>
				<view class="footer-tips">
					<text>安全认证</text>
					<text>隐私保护</text>
					<text>实名认证</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: '',
				userAvatars: [
					'https://202231117.oss-cn-beijing.aliyuncs.com/图像1.jpg',
					'https://202231117.oss-cn-beijing.aliyuncs.com/图像3.jpg',
					'https://202231117.oss-cn-beijing.aliyuncs.com/图像2.jpg',
					'https://202231117.oss-cn-beijing.aliyuncs.com/图像4.jpg'
				]
			}
		},
		methods: {
			login() {
				if(!this.phone || !this.password) {
					uni.showToast({
						title: '请输入手机号和密码',
						icon: 'none'
					})
					return
				}
				uni.switchTab({
					url: '../index/index'
				})
			},
			register(){
				uni.navigateTo({
					url: '../register/register'
				})
			},
			forgotPassword(){
				uni.navigateTo({
					url: '../forgotPassword/forgotPassword'
				})
			},
			
			handleWechatLogin(e) {
				console.log('用户信息：', e.detail.userInfo)
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.page-container {
		height: 100vh;
		position: relative;
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.bg-image {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}

	.bg-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.bg-overlay {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient(135deg, rgba(255,182,193,0.15), rgba(255,105,180,0.3));
		backdrop-filter: blur(4px);
	}

	.content {
		position: relative;
		z-index: 2;
		padding: 2vh 4vw;
		display: flex;
		flex-direction: column;
		height: 100vh;
		box-sizing: border-box;
		justify-content: space-between;
		animation: fadeIn 1s ease;
	}

	.header {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 1vh 0;
		animation: slideDown 0.8s ease;
	}

	@keyframes slideDown {
		from {
			opacity: 0;
			transform: translateY(-40rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.logo {
		width: 15vw;
		height: 15vw;
		max-width: 120rpx;
		max-height: 120rpx;
		margin-bottom: 1vh;
		border-radius: 50%;
		border: 0.6vw solid rgba(255,255,255,0.95);
		box-shadow: 0 8rpx 32rpx rgba(255,105,180,0.3);
		animation: pulse 2s infinite;
		background: rgba(255,255,255,0.9);
	}

	@keyframes pulse {
		0% {
			transform: scale(1);
		}
		50% {
			transform: scale(1.05);
		}
		100% {
			transform: scale(1);
		}
	}

	.title {
		font-size: 36rpx;
		font-weight: 600;
		margin-bottom: 8rpx;
		text-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
		background: linear-gradient(45deg, #fff, #ffe4e1);
		-webkit-background-clip: text;
		color: transparent;
		letter-spacing: 4rpx;
		position: relative;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}

	.subtitle {
		font-size: 24rpx;
		color: rgba(255,255,255,0.95);
		text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
		font-style: italic;
		letter-spacing: 2rpx;
		font-weight: 300;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}

	.welcome-text {
		font-size: 22rpx;
		color: rgba(255,255,255,0.9);
		margin-top: 6rpx;
		font-style: italic;
		letter-spacing: 1rpx;
		font-weight: 300;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 20rpx;
		text-align: center;
		position: relative;
		letter-spacing: 2rpx;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}

	.section-title::after {
		content: '';
		position: absolute;
		bottom: -6rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 32rpx;
		height: 3rpx;
		background: linear-gradient(90deg, #ff69b4, #ff1493);
		border-radius: 2rpx;
	}

	.input-group {
		margin-bottom: 1.5vh;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		background: rgba(255, 255, 255, 0.9);
		border-radius: 12rpx;
		padding: 20rpx 24rpx;
		margin-bottom: 20rpx;
		border: 2rpx solid rgba(255,105,180,0.15);
		transition: all 0.3s ease;
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0 4rpx 12rpx rgba(255,105,180,0.05);
	}

	.input-wrapper:focus-within {
		border-color: #ff69b4;
		box-shadow: 0 8rpx 24rpx rgba(255,105,180,0.15);
		transform: translateY(-2rpx);
		background: rgba(255, 255, 255, 1);
	}

	.input-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 16rpx;
		opacity: 0.8;
	}

	.custom-input {
		flex: 1;
		font-size: 26rpx;
		color: #333;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
		height: 60rpx;
		line-height: 60rpx;
		min-height: 60rpx;
		padding: 0;
		background: transparent;
	}

	.input-placeholder {
		color: #999;
		font-size: 24rpx;
		font-weight: 300;
	}

	.action-buttons {
		margin: 20rpx 0;
		width: 100%;
	}

	.login-btn {
		width: 100%;
		height: 80rpx;
		background: #ff69b4;
		font-size: 30rpx;
		font-weight: 600;
		margin-bottom: 20rpx;
		letter-spacing: 4rpx;
		border-radius: 40rpx;
		color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.wechat-login-wrapper {
		width: 100%;
		height: 80rpx;
		padding: 0;
		margin: 0;
		background: transparent;
		border: none;
		line-height: 1;
	}

	.wechat-login-wrapper::after {
		border: none;
	}

	.wechat-btn {
		width: 100%;
		height: 80rpx;
		background: #07c160;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 30rpx;
		font-weight: 500;
		letter-spacing: 4rpx;
	}

	.wechat-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 8rpx;
	}

	.bottom-links {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid rgba(255,105,180,0.1);
	}

	.link-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
		font-size: 24rpx;
		color: #666;
		transition: all 0.3s ease;
		font-weight: 300;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}

	.link-item:active {
		opacity: 0.8;
	}

	.highlight {
		color: #ff69b4;
		font-weight: 500;
		position: relative;
		letter-spacing: 1rpx;
	}

	.highlight::after {
		content: '';
		position: absolute;
		bottom: -2rpx;
		left: 0;
		width: 100%;
		height: 2rpx;
		background: linear-gradient(90deg, #ff69b4, transparent);
		opacity: 0.8;
	}

	.features-section {
		display: flex;
		justify-content: space-around;
		padding: 24rpx 20rpx;
		margin: 1.5vh 0;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 20rpx;
		box-shadow: 0 12rpx 36rpx rgba(255,105,180,0.12);
		backdrop-filter: blur(10px);
		border: 1rpx solid rgba(255,255,255,0.9);
		width: 100%;
		box-sizing: border-box;
		animation: fadeIn 1s ease 0.3s both;
	}

	.feature-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 12rpx;
		transition: all 0.3s ease;
		position: relative;
	}

	.feature-item::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 0;
		height: 2rpx;
		background: linear-gradient(90deg, #ff69b4, #ff1493);
		transition: width 0.3s ease;
	}

	.feature-item:active::after {
		width: 80%;
	}

	.feature-icon {
		width: 5vw;
		height: 5vw;
		max-width: 40rpx;
		max-height: 40rpx;
		margin-bottom: 0.8vh;
		transition: transform 0.3s ease;
	}

	.feature-item:active .feature-icon {
		transform: scale(0.95);
	}

	.feature-item text {
		font-size: 22rpx;
		color: #666;
		font-weight: 400;
		letter-spacing: 1rpx;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}

	.footer {
		padding: 1.5vh 0;
		text-align: center;
		animation: fadeIn 1s ease 0.6s both;
		background: rgba(255, 255, 255, 0.1);
		border-radius: 20rpx;
		backdrop-filter: blur(8px);
		margin-top: 1.5vh;
	}

	.footer-text {
		font-size: 22rpx;
		color: rgba(255,255,255,0.95);
		margin-bottom: 8rpx;
		text-shadow: 0 2rpx 4rpx rgba(0,0,0,0.1);
		font-style: italic;
		letter-spacing: 2rpx;
		font-weight: 300;
		font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
	}

	.footer-icons {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 12rpx 0;
	}

	.avatar {
		width: 7vw;
		height: 7vw;
		max-width: 50rpx;
		max-height: 50rpx;
		border-radius: 50%;
		border: 0.3vw solid #fff;
		margin: 0 -0.8vw;
		box-shadow: 0 4rpx 12rpx rgba(255,105,180,0.2);
		transition: all 0.3s ease;
		animation: float 3s ease-in-out infinite;
	}

	.footer-tips {
		display: flex;
		justify-content: center;
		gap: 3vw;
		margin-top: 1.5vh;
		padding: 0 3vw;
	}

	.footer-tips text {
		font-size: 20rpx;
		color: rgba(255,255,255,0.9);
		position: relative;
		padding: 0 6rpx;
	}

	@keyframes shine {
		0% {
			transform: translateX(-100%) rotate(45deg);
		}
		100% {
			transform: translateX(100%) rotate(45deg);
		}
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
		}
		to {
			opacity: 1;
		}
	}

	@media screen and (max-width: 320px) {
		.content {
			padding: 1vh 3vw;
		}
		
		.form-section {
			padding: 24rpx 20rpx;
		}
		
		.features-section {
			padding: 20rpx 16rpx;
		}
	}

	@media screen and (min-width: 768px) {
		.content {
			max-width: 600px;
			margin: 0 auto;
		}
	}
</style>